<template>
	<el-carousel height="300px">
		<el-carousel-item v-for="(url, index) in swiperList" :key="index" style="height: 300px;">
      <PreviewImgPage :src="url" :key="index" style="width:100%;height: 96%;"></PreviewImgPage>
		</el-carousel-item>
	</el-carousel>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import defaultImg from '@/assets/imgs/default_user_logo.webp'
import PreviewImgPage from './PreviewImg/index.vue'
export default defineComponent({
  components: {
    PreviewImgPage
  },
	props: {
		value: {
			type: [String, Array],
		},
		item: {
			type: Object,
			default: () => ({}),
		},
		model: {
			type: Object,
			default: () => ({}),
		},
	},
	setup(props) {
		const swiperList = ref([defaultImg]) as any
		watch(
			() => props.value,
			(val) => {
				let url = []
				if (props.item.props) {
					const urls = props.item.props.map((item) => {
						return props.model[item]
					})
					url = urls
				} else {
					url = Array.isArray(props.value) ? props.value : (props.value && props.value.split(',') ||[])
				}
        if(url.filter(Boolean).length > 0) {
				  swiperList.value = url.filter(Boolean)
        }
			},
			{
				immediate: true,
			}
		)
		return {
			swiperList,
		}
	},
})
</script>

<style scoped>
</style>
